import React, { useState, useRef } from 'react';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';
import Search from './search';
import ServiceContent from './serviceContent';
import SearchHistory from './searchHistory';
import SearchResult from './serviceResult';
import Bottom from './bottom';

const CustomerService = () => {
  const [step, setStep] = useState(1);
  const lastStep = useRef(1);

  const handleStatus = (status) => {
    switch (status) {
      case 2:
        lastStep.current = step;
        setStep(2);
        break;
      case 3:
        lastStep.current = step;
        setStep(3);
        break;
      case 'back':
        step == 2 && setStep(lastStep.current);
      default:
        break;
    }
  };

  const [historySelected, setHistorySelected] = useState('');

  return (
    <View className={'customerService ' + (step == 1 ? 'backGray' : '')}>
      <Search handleStatus={handleStatus} historySelected={historySelected} />
      <ServiceContent className={step !== 1 ? 'hidden' : 'show'} />
      <SearchHistory
        className={step !== 2 ? 'hidden' : 'show'}
        handleHistory={setHistorySelected}
      />
      <SearchResult className={step !== 3 ? 'hidden' : 'show'} />
      {Taro.$isH5 ? null : <Bottom className={step !== 1 ? 'hidden' : 'show'} />}
    </View>
  );
};

export default CustomerService;
